import React, {Component} from 'react';
import {StyleSheet, Text, View, Image, 
  TouchableOpacity,Dimensions,ImageBackground
} from 'react-native';
const {height, width} = Dimensions.get('window');
import Toast, {DURATION} from 'react-native-easy-toast'
import BackButton from '../../component/BackButton';
import MyButton from '../../component/MyButton';
import {jumpPage} from '../../common/common';
import VipPower from './VipPower';
import DeviceStorage from '../../common/DeviceStorage';
import {BASEURL} from '../../api/api'
const dismissKeyboard = require('dismissKeyboard');
export default class VipCenter extends Component{
  static navigationOptions = ({ navigation }) =>{
    return{
      title:'会员中心',
      headerRight:(<View></View>),
			headerLeft:<BackButton navigation = {navigation}/>,
			headerStyle:{
				backgroundColor:'#000'
			},
			headerTitleStyle:{
				color:'white',
				flex:1,
				textAlign:'center',
			}
		}
	};
	constructor(props){
		super(props);
		this.state = ({
			userInfo:this.props.navigation.getParam('userInfo')
		})
	}
	_goVipPay(){
		jumpPage(this.props.navigation,'vipPay');
	}
	_goVipCard(){
		jumpPage(this.props.navigation,'vipCard');
	}
	_goPrivilege(){
		jumpPage(this.props.navigation,'vipPrivilege');
	}
	render(){
		const powerData = [
			{text: '免费模板' ,img: require('../../images/mine/vip_temp.png')}
		]
		let {nickname,vip} = this.state.userInfo;
		let vipIcon = require('../../images/mine/icon_vip0.png');
    let vipText = '未开通VIP会员';
    if(vip == '1') {
      vipIcon = require('../../images/mine/icon_vip1.png');
      vipText = "初级VIP会员";
    }else if(vip == '2') {
      vipIcon = require('../../images/mine/icon_vip2.png');
      vipText = "中级VIP会员";
    }else if(vip == '3') {
      vipIcon = require('../../images/mine/icon_vip3.png');
      vipText = "高级VIP会员";
		}
		let headIcon = require('../../images/mine/icon_head.png');
		if(this.state.userInfo.headIcon){
			//alert(this.state.userInfo.headIcon)
			headIcon = {uri: this.state.userInfo.headIcon};
		}
		return(
			<View style={{flex:1,backgroundColor:'#000'}}>
				<ImageBackground style={styles.topView} source={require('../../images/mine/vip_bg3.png')}>
					<View style={{flexDirection:'row',alignItems:'center'}}>
						<Image  style={styles.headImg} source={headIcon}/>
						<View style={{marginLeft:10}}>
							<View style={styles.nameView}>
								<Text style={styles.nameText}>{nickname?nickname:'未设置昵称'}</Text>
								<Image style={{marginLeft:10,width:20,height:20}} source={vipIcon}/>
							</View>
							{
								vipText!='未开通VIP会员'?<Text style={{color:'white',paddingBottom:0}}>{vipText}</Text>:
								<Text style={{color:'white',paddingLeft:0,paddingRight:0,marginTop:10,
									textDecorationLine:'underline'}} onPress={()=>this._goVipPay()}
								>立即开通会员</Text>
							}
							
						</View>
					</View>
					{/* <View style={{marginTop:10,height:80,alignItems:'flex-end'}}> 
						<MyButton btnStyle={{width:width/3,marginRight:15,borderRadius:30,}} 
							text='立即开通' press={()=>this._goVipPay()}/>
					</View> */}
					<View >
						<Text style={{marginLeft:20,color:'white',fontSize:17,paddingBottom:5,paddingTop:100}}>我的资产</Text>
						<View style={{flexDirection:'row',justifyContent:'space-around',
							paddingLeft:10,paddingRight:10,alignItems:'center'}}>
							<TextView num='0' title='代金券' press={()=>{this._goVipCard()}}/>
							<SplitLine/>
							<TextView num='0' title='去广告'/>
							<SplitLine/>
							<TextView num='0' title='1080P下载'/>
							<SplitLine/>
							<TextView num='0' title='去水印'/>
							<SplitLine/>
							<TextView num='0' title='分享次数'/>
						</View>
					</View>
				</ImageBackground>
				<SplitView/>
				{/* <View>
					<TouchView text='代金券' press={()=>this._goVipCard()}/>
					<View style={{justifyContent:'center',alignItems:'center',padding:8}}>
						<Text style={{color:'#888',fontSize:15}}>亲，您暂时没有可使用的代金券哦~~</Text>
					</View>
				</View> */}
				<View style={{backgroundColor:'#272727'}}>
					<TouchView text='会员特权' press={()=>{this._goPrivilege()}}/>
					<VipPower data={powerData}/>
				</View>
				<SplitView/>
				<TouchView text='会员帮助' img={require('../../images/mine/warning2.png')}/>
			</View>
		)
	}
}
class SplitLine extends Component{
	render(){
		return(
			<View style={{height:40,width:1,backgroundColor:'white'}}></View>
		)
	}
}
class TextView extends Component{
	render(){
		return(
			<TouchableOpacity style={{alignItems:'center'}} onPress={this.props.press}>
				<Text style={{paddingBottom:5,paddingTop:5,fontSize:17,color:'#bcac48'}}>{this.props.num}</Text>
				<Text style={{paddingBottom:10,color:'white',fontSize:15,}}>{this.props.title}</Text>
			</TouchableOpacity>
		)
	}
}
class TouchView extends Component{
	render(){
		return(
			<TouchableOpacity style={[{flexDirection:'row',justifyContent:'space-between',backgroundColor:'#272727',
			alignItems:'center',paddingLeft:20,paddingRight:15,paddingTop:10,paddingBottom:10}]}
				onPress={this.props.press}> 
				<View style={{flexDirection:'row',alignItems:'center'}}>
					{!this.props.img?null:
						<Image style={{width:20,height:20,marginRight:5}} source={this.props.img}/>
					}
					<Text style={[{color:'#fff',fontSize:17},this.props.textStyle]}>{this.props.text}</Text>
				</View>
				<Image style={{width:18,height:16}} source={require('../../images/mine/arrow_right.png')}/>
			</TouchableOpacity>
		)
	}
}
class SplitView extends Component{
	render(){
		return(
			<View style={{height:10,backgroundColor:'#000'}}></View>
		)
	}
}
const styles = StyleSheet.create({
	nameText:{
		fontWeight:'bold',
		color:'white',
		fontSize:17,
		paddingTop:5,
		paddingBottom:5
	},	
	nameView:{
		flexDirection:'row',
		alignItems:'center'

	},	
	headImg:{
		width:width/5,
		height:width/5,
		borderRadius:width/10,
		marginTop:10,
		marginLeft:30
	},	
	topView:{
		paddingTop:10,
		paddingBottom:10,
		marginBottom:0,
		borderRadius:10,
	}
})